<template>
	<view>
		<uni-nav-bar statusBar @clickLeft='clickLeft()' @clickRight="clickRight(0)" :border='border' color="#000000"
			fixed backgroundColor='#FFFFFF00' left-icon="left" :title="navTitle">

		</uni-nav-bar>
		<view class="topView">
			<view class="topView1"></view>
			<view class="infoView">
				<view v-for="(item,index) in list" :key="index">
					<view @click="itemClick(item)" class="item flex-row-space-between">
						<view class="name">
							{{item.name}}
						</view>
						<view class="flex-row-flex-end">
							<image v-if="item.name=='头像'" class="headImage" :src="userinfo.avatar" mode=""></image>
							<input v-else-if="item.name=='昵称'" type="text" v-model="userinfo.nickname"
								placeholder="请输入昵称" />
								<picker v-else-if="item.name=='生日'"  mode="date" :value="date"  @change="bindDateChange">
				<view  class="value">
					{{date}}
				</view>
													</picker>
							<view v-else class="value">
								{{item.value}}
							</view>


							<image class="arrow" src="/static/common/arrow.png" mode=""></image>
						</view>

					</view>
				</view>
			</view>
<view v-if="!type" @click="buttonClick()" class="button flex-row-center">
				确认
			</view>
		</view>
	<!-- 	<u-picker :show="show1" mode="time" @cancel="modeCancel()"  @confirm='click1'></u-picker> -->
			<u-picker @cancel="modeCancel()" :show="show" :columns="columns" @confirm='click' keyName="label"></u-picker>
			
	</view>
</template>

<script>
	import {
		chooseImage,
		chooseImage1
	} from "@/utils";
	import {
		userProfile,
		userDetail
	} from '@/api/personalCenter.js'
	
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				date:'',
				show1:false,
				show: false,
				columns: [
					['男','女']
				],
				border: false,
				navTitle: '个人资料',
				type: 0,
				list: [{
						name: '问题反馈',
						value: '',
						url: 'feedback?type=1'
					},
					{
						name: '收费标准',
						value: '',
						url: 'richText?title=收费标准'
					},
					{
						name: '用户协议',
						value: '',
						url: 'richText?title=用户协议'
					},
					{
						name: '关于我们',
						value: '',
						url: 'richText?title=关于我们'
					}


				],
				userinfo: {}

			}
		},
		onShow() {

		},
		onLoad(e) {
			this.userinfo = uni.getStorageSync('userinfo')
			
			if (e.type) {
				this.type = Number(e.type)
			}
			if (this.type) {
				this.navTitle = '帮助'
			} else {
				this.userDetail()
				var gender = '未知'
				if (Number(this.userinfo.gender) == 1) {
					gender = '男'
				}
				if (Number(this.userinfo.gender) == 2) {
					gender = '女'
				}
				this.list = [{
						name: '昵称',
						value: this.userinfo.nickname,
						url: ''
					},
					{
						name: '头像',
						value: '',
						url: ''
					},
					{
						name: '性别',
						value: gender,
						url: ''
					},
					{
						name: '生日',
						value: this.userinfo.birthday ? this.userinfo.birthday : '暂无',
						url: ''
					}
				]
			}
			this.date=this.userinfo.birthday ? this.userinfo.birthday : '暂无'


		},

		methods: {
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			userDetail(){
				userDetail()
					.then(res => {
						uni.setStorageSync('userinfo', res.data)
					this.userinfo = uni.getStorageSync('userinfo')
					})
			},
					
			buttonClick(){
				
				userProfile(this.userinfo)
					.then(res => {
						this.showToast(res.msg)
			
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					})
			},
			bindDateChange(e){
					console.log(e)
					this.date=e.detail.value
					this.userinfo.birthday=e.detail.value
			},
			click1(e){
				console.log(e)
			},
			click(e) {
				this.userinfo.gender=e.indexs[0]+1
				var gender = '未知'
				if (Number(this.userinfo.gender) == 1) {
					gender = '男'
				}
				if (Number(this.userinfo.gender) == 2) {
					gender = '女'
				}
				console.log(this.userinfo.gender)
				this.list[2].value=gender
				this.show = false
			},
			modeCancel(){
			this.show=false	
			this.show1=false	
			},
			itemClick(item) {
				if (item.name == '头像') {
					chooseImage((img) => {
						console.log(img)
						this.userinfo.avatar = img
					});
					return
				}
				if (item.name == '性别') {
					this.show = true
					return
				}
				// if (item.name == '生日') {
				// 	this.show1 = true
				// 	return
				// }
				
				uni.navigateTo({
					url: item.url
				})
			},
			clickLeft() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F6F7;
	}

	.infoView {
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
	}

	.item {
		margin: 0 30rpx;
		height: 100rpx;
	}

	.name {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		// font-weight: 500;
		color: #3D3D3D;
	}

	input {
		text-align: right;
		margin-right: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		// font-weight: 400;
		color: #999999;
	}

	.value {
		margin-right: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		// font-weight: 400;
		color: #999999;
	}

	.headImage {
		margin-right: 20rpx;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
	}
	.button{
			margin:90rpx 60rpx;
			height: 90rpx;
			background: $base-color;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			// font-weight: 500;
			color: #FFFFFF;
		}
</style>
